<template>
    <div :style="{ width: width, height: height }" ref="bloodTiesChartRef"></div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
} from 'echarts/components';
import { GraphChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { color } from 'echarts';
echarts.use([
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GraphChart,
    CanvasRenderer
]);
const props = defineProps({
    data: Array,
    width: String,
    height: String
})

const bloodTiesChartRef = ref(null);
let bloodTiesChart: any = null;
const edgesData = reactive([]);
const optionData = ref([]);
const initEchart = () => {
    const bloodTiesChart = echarts.init(bloodTiesChartRef.value);
    const option = {
        series: [
            {
                type: 'graph',
                layout: 'force',
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '{b}', // 显示节点名称
                    color: '#394D73',
                    fontSize: 14,
                },
                symbolSize: 156,  // 设置节点大小
                // zoom: 2,  // 设置图像的缩放
                roam: true,
                force: {
                    repulsion: 10000  // 用于控制节点之间的排斥力
                },
                lineStyle: {
                    width: 2, // 这里设置连线的粗度
                    color: '#465A80',
                },
                edgeSymbol: ['arrow'],
                data: optionData.value,
                edges: edgesData,
            }
        ],
    };
    bloodTiesChart && bloodTiesChart.setOption(option);
}
onMounted(() => {
    window.addEventListener('resize', () => {
        bloodTiesChart && bloodTiesChart.resize()
    })
});
onBeforeUnmount(() => {
    window.removeEventListener('resize', () => {
        bloodTiesChart && bloodTiesChart.resize()
    })
});
watch(() => props.data, (newValue) => {
    optionData.value = newValue?.map((v: any) => {
        if(v.currently){
            v.itemStyle = {
                color: '#FFC5C5',
                borderColor: '#FE7F7F',
                borderWidth: 2,
            }
        }else{
            switch(v.type){
                case '普通资源':
                    v.itemStyle = {
                        color: '#FFD4B0',
                        borderColor: '#FDAA65',
                        borderWidth: 2,
                    }
                    break;
                case '资产':
                    v.itemStyle = {
                        color: '#AEC5FF',
                        borderColor: '#4C7FFE',
                        borderWidth: 2,
                    }
                    break;
                case '根资源':
                    v.itemStyle = {
                        color: '#B6EFD0',
                        borderColor: '#54DB98',
                        borderWidth: 2,
                    }
                    break;
            }
        }
        if(v.parent_id?.length > 0){
            v.parent_id.map((s: any) => {
                edgesData.push({
                    source: v.id.toString(),
                    target: s.toString()
                } as never);
            })
        }
        v.id = v.id.toString();
        return v;
    }) as never;
    initEchart();
});
</script>
<style lang="less" scoped></style>